<template>
  <div class="login_container">
    <div class="login">
      <div class="avatar_box">
        <img src="../assets/logo.png" alt="">
      </div>
      <h2 style="text-align:center">欢迎登录</h2>
      <el-form :rules="rules" :model="userInfo" ref="userInfo" label-width="80px">
        <el-form-item label="账号" prop="username">
          <el-input type="text" v-model="userInfo.username" prefix-icon="el-icon-user-solid" style="width:300px"
            placeholder="请输入账号"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input type="password" v-model="userInfo.password" prefix-icon="el-icon-s-help" style="width:300px"
            placeholder="请输入密码">
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm">登录</el-button>
          <el-button @click="resetForm">重置</el-button>

        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
  export default {
    name: "Login",
    data() {
      return {
        userInfo: {
          username: "admin",
          password: "123456"
        },
        //验证规则
        rules: {
          username: [{
            required: true,
            message: '不能为空哦~',
            trigger: 'blur'
          }],
          password: [{
            required: true,
            message: '不能为空哦~',
            trigger: 'blur'
          }]
        }
      }
    },
    methods: {
      //登录
      submitForm() {
        this.$refs.userInfo.validate(async (valid) => {
          if (valid) {
            let result = await this.$requests.post("login", this.userInfo)
            if (result.meta.status == 200) {
              //存储token
              localStorage.setItem("TOKEN", result.data.token)
              //弹出框
              this.$message({
                showClose: true,
                message: '登录成功!',
                type: 'success'
              });
              //跳转路由
              this.$router.push("/home")
            } else {
              this.$message({
                message: "登录失败了哦,再检查检查吧"
              })
            }

          } else {
            this.$message({
              message: "要填写完整哦(#^.^#)"
            })
            return false;
          }
        });
      },
      //重置
      resetForm() {
        this.$refs.userInfo.resetFields();
      }
    }
  }

</script>

<style scoped lang="less">
  .login_container {
    background-image: url("../assets/images/background.jpg");
    background-repeat: round;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .login {
    width: 440px;
    height: 400px;
    background-color: aliceblue;
    box-shadow: 0 0 20px rgb(207, 206, 206);
    border-radius: 30px;

    h2 {
      margin-top: 70px;
    }

    .avatar_box {
      height: 130px;
      width: 130px;
      border: 1px solid #eee;
      background-color: aliceblue;
      padding: 10px;
      box-shadow: 0 0 20px #ddd;
      border-radius: 50%;
      position: absolute;
      left: 50%;

      transform: translate(-50%, -60%);

      img {
        height: 100%;
        width: 100%;
        border-radius: 50%;

      }
    }
  }

</style>
